在 JavaScript 中，for 循环和 for...of 循环是两种常用的迭代结构，但它们有不同的用途和语法。以下是它们的主要区别：

for 循环

for 循环是一种传统的循环结构，通常用于遍历数组、对象属性或执行固定次数的迭代。它的一般语法如下：

for (初始化表达式; 条件表达式; 递增/递减表达式) {
    // 循环体
}

示例

1. 遍历数组

const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i  ) {
    console.log(arr[i]);
}

2. 执行固定次数的迭代

for (let i = 0; i < 10; i  ) {
    console.log(i);
}

3. 遍历对象的属性（使用 for...in）

虽然 for 循环本身不能直接遍历对象的属性，但 for...in 循环可以：

const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
    console.log(key, obj[key]);
}

for...of 循环

for...of 循环是 ES6 引入的一种新的迭代结构，用于遍历可迭代对象（如数组、字符串、Map、Set 等）。它直接迭代对象的值，而不是索引。

语法

for (const value of iterable) {
    // 循环体
}

示例

1. 遍历数组

const arr = [1, 2, 3, 4, 5];
for (const value of arr) {
    console.log(value);
}

2. 遍历字符串

const str = "hello";
for (const char of str) {
    console.log(char);
}

3. 遍历 Map 和 Set

const map = new Map([['a', 1], ['b', 2]]);
for (const [key, value] of map) {
    console.log(key, value);
}

const set = new Set([1, 2, 3]);
for (const value of set) {
    console.log(value);
}

主要区别

1. 迭代对象：

   • for 循环通常用于遍历数组（通过索引）或执行固定次数的迭代。
   • for...in 循环用于遍历对象的可枚举属性。
   • for...of 循环用于遍历可迭代对象（如数组、字符串、Map、Set 等），直接获取值。

2. 语法简洁性：

   • for...of 循环更简洁，不需要手动管理索引。
   • for 循环需要手动管理索引，并且在遍历数组时需要通过索引访问元素。

3. 性能：

   • 在遍历数组时，for 循环和 for...of 循环的性能通常相差不大，但 for...of 循环的语法更简洁。
   • for...in 循环在遍历对象属性时可能会遍历到原型链上的属性，需要额外的处理（如使用 hasOwnProperty 方法）来避免。

总结

• 使用 for 循环当你需要手动管理索引或执行固定次数的迭代。
• 使用 for...of 循环当你需要遍历可迭代对象并直接获取值。
• 使用 for...in 循环当你需要遍历对象的可枚举属性（但需要注意原型链上的属性）。